<template>
  <div class="menu">
    <!-- 页头 -->
    <a-page-header class="title" @back="goBack" :sub-title="bookName"></a-page-header>
    <div class="blank" @click="clickBlank()"></div>

    <!-- 调整文字 -->
    <transition name="adjustedText">
      <div class="text" v-show="showText">
        <div class="size">
          <span>字号：</span>
          <button @click="reSize(-1)">-</button>
          <span>{{readStyle.fontSize}}</span>
          <button @click="reSize(1)">+</button>
        </div>
        <div class="height">
          <span>行间距:</span>
          <button @click="reLineHeight(-0.1)">-</button>
          <span>{{readStyle.lineHeight}}</span>
          <button @click="reLineHeight(0.1)">+</button>
        </div>
      </div>
    </transition>

    <!-- 调整颜色 -->
    <transition name="adjustedColor">
      <div class="color" v-show="showColor">
        <div class="txtcolor">
          文字颜色：
          <input type="color" name id v-model="color" />
        </div>
        <div class="background">
          背景颜色：
          <input type="color" name id v-model="background" />
        </div>
        <button class="resetColor" @click="resetColor()">默认颜色</button>
      </div>
    </transition>

    <div class="bottom">
      <div class="press">
        <div @click="$emit('changeChapter','pre')">上一章</div>
        <div class="progress">
          <input type="range" min="0" :max="catalogLength-1" v-model="newChapterIndex" />
        </div>
        <div @click="$emit('changeChapter','next')">下一章</div>
      </div>
      <ul class="set">
        <li @click="$emit('controlCatalog')">
          <img src="../assets/目录.png" alt />
          <span>目录</span>
        </li>
        <li @click="clickText()">
          <img src="../assets/字体.png" alt />
          <span>文字</span>
        </li>
        <li @click="clickColor()">
          <img src="../assets/颜色.png" alt />
          <span>颜色</span>
        </li>
        <li v-show="night" @click="clickNight()">
          <img src="../assets/夜间.png" alt />
          <span>夜间</span>
        </li>
        <li v-show="!night" @click="clickDay()">
          <img src="../assets/日间.png" alt />
          <span>白天</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {PageHeader} from 'ant-design-vue'

export default {
  components:{
    'a-page-header':PageHeader
  },
  data() {
    return {
      showText: false,
      showColor: false,
      style: {
        fontSize: 18,
        color: null,
        background: null,
        lineHeight: 1.5
      },
      color: "",
      background: "",
      night: null,
      newChapterIndex: this.currentChapter
    };
  },
  props: ["bookName", "currentChapter", "catalogLength"],
  computed: {
    readStyle() {
      return this.$store.state.readStyle;
    }
  },
  created() {
    this.color = this.$store.state.readStyle.color;
    this.background = this.$store.state.readStyle.background;
    this.night = this.$store.state.night;
  },
  watch: {
    //watch不能监听对象的属性，所以这里监听外层的color和background，然后改变style中的属性，然后提交改变
    color: function(val) {
      this.style.color = val;
      this.$store.commit("updateStyle", this.style);
    },
    background: function(val) {
      this.style.background = val;
      this.$store.commit("updateStyle", this.style);
    },
    currentChapter:function(val){
      this.newChapterIndex=val
    },
    newChapterIndex: function(val) {
      // 监听进度条变化，注意防抖
      if (window.timeout !== null) {
        clearTimeout(window.timeout);
      }
      window.timeout = setTimeout(() => {
        this.$emit("changeChapter", val);
      }, 200);
    }
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 调整文字大小
    reSize(i) {
      let newSize = this.style.fontSize + i;
      if (newSize < 12) {
        newSize = 12;
      } else if (newSize > 24) {
        newSize = 24;
      }
      this.style.fontSize = newSize;
      this.$store.commit("updateStyle", this.style);
    },
    // 调整行间距
    reLineHeight(i) {
      let newLineHeight = this.style.lineHeight + i;
      if (newLineHeight < 1.2) {
        newLineHeight = 1.2;
      } else if (newLineHeight > 2) {
        newLineHeight = 2;
      }
      this.style.lineHeight = newLineHeight;
      this.$store.commit("updateStyle", this.style);
    },
    clickText() {
      this.showColor = false;
      this.showText = !this.showText;
    },
    clickColor() {
      this.showText = false;
      this.showColor = !this.showColor;
    },
    clickBlank() {
      this.showColor = false;
      this.showText = false;
      this.$emit("controlMenu", false);
    },
    resetColor() {
      this.color = "#000000";
      this.background = "#ffffff";
    },
    clickNight() {
      this.night = false;
      this.color = "#D8D8D8";
      this.background = "#000000";
      this.$store.commit("updateNight", false);
    },
    clickDay() {
      this.night = true;
      this.color = "#000000";
      this.background = "#ffffff";
      this.$store.commit("updateNight", true);
    }
  }
};
</script>

<style scoped>
.progress {
  width: 50%;
}
.progress input {
  width: 100%;
}

.menu {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 3;
}
.title {
  height: 50px;
  line-height: 50px;
  background: white;
  border-bottom: 1px solid lightgray;
  overflow: hidden;
}
.blank {
  width: 100%;
  height: 70%;
  position: absolute;
  top: 10%;
  /* background: lightblue; */
}
.bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 15%;
  background: white;
  border-top: 1px solid lightgray;
}
.press {
  height: 35%;
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
}

.set {
  height: 70%;
  display: flex;
  justify-content: space-around;
}
.set li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.set li img {
  width: 20px;
  height: 20px;
}

.adjustedText-enter-active,
.adjustedText-leave-active {
  transition: all 0.5s;
}
.adjustedText-enter,
.adjustedText-leave-to {
  transform: translateY(100%);
}
.text {
  position: absolute;
  height: 12%;
  width: 100%;
  bottom: 15%;
  background: whitesmoke;
  border: 1px solid lightgray;
}
.text .size {
  margin-top: 10px;
  margin-left: 20px;
}
.text .height {
  margin-top: 10px;
  margin-left: 20px;
}

.adjustedColor-enter-active,
.adjustedColor-leave-active {
  transition: all 0.5s;
}
.adjustedColor-enter,
.adjustedColor-leave-to {
  transform: translateY(100%);
}
.color {
  position: absolute;
  height: 12%;
  width: 100%;
  bottom: 15%;
  background: whitesmoke;
  border: 1px solid lightgray;
}
.color .txtcolor {
  margin-top: 5px;
  margin-left: 20px;
}
.color .background {
  margin-top: 5px;
  margin-left: 20px;
}
.resetColor {
  float: right;
  margin-top: -50px;
  margin-right: 50px;
}

@media screen and (min-width: 420px) {
  .title {
    background: lightgray;
  }
  .bottom {
    background: lightgray;
  }
  .menu{
    top:33px
  }
}

</style>
